﻿<template>
  <div>
    <el-container v-show = "currentThemeWatch.indexOf('theme_default') !== -1">
      <!-- 侧边栏 -->
      <el-aside :class = "isCollapse ? 'self_el_aside self_el_aside_collapse' : 'self_el_aside'">
        <v-sidebar></v-sidebar>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <v-header @toLogout = "isShow = true"></v-header>
        </el-header>
        <!-- 主要内容部分 -->
        <el-main v-loading = 'getRouteLoading' class = 'slider_main' :element-loading-text = '$store.state.routerLoadingText'>
          <div class = "content">
            <transition name = "move" mode = "out-in">
              <router-view v-if = "isActiveRouter && currentThemeWatch.indexOf('theme_default') !== -1"></router-view>
              <!-- 如果需要缓存，可使用keep-alive -->
            </transition>
          </div>
        </el-main>
        <!-- 底部 -->
        <el-footer>
          <v-footer></v-footer>
        </el-footer>
      </el-container>
    </el-container>
    <div v-show = "currentThemeWatch === 'theme_dark'" class = 'darkContent'>
      <!-- 头部 -->
      <div class = 'dark_header'>
        <!-- 左边时间部分 -->
        <div class = 'dark_header_time'>
          <V-Clock></V-Clock>
        </div>
        <!-- 中间logo部分 -->
        <div class = 'dark_header_logo'>
          <div class = 'dark_header_logo_text'>
            <img src = "static/style/theme_dark/images/logo.png" alt="">
            <span>2021©武汉飞加网络科技. ALL Rights Reserved.</span>
          </div>
        </div>
        <!-- 右侧的个人信息部分 -->
        <div class = 'dark_header_info'>
          <V-Header-Info></V-Header-Info>
        </div>
      </div>
      <!-- 主要内容部分 -->
      <div v-loading = 'getRouteLoading' :element-loading-text = '$store.state.routerLoadingText'
      :class = "isCollapse ? 'dark_main dark_main_collapse' : 'dark_main'">
        <!-- 左边的菜单 -->
        <div class = 'dark_main_left' :class = "isCollapse ? 'dark_main_left dark_main_left_collapse' : 'dark_main_left'">
          <!-- 上部一个按钮 -->
          <div class = 'dark_main_left_collapseBtn'>
            <span @click = 'changeCollapse' :title = "isCollapse ? '展开' : '收起'">
              <i class = 'iconfont icon-icon-GIS_zhankai' v-show = 'isCollapse'></i>
              <i class = 'iconfont icon-icon-GIS_shouqi' v-show = '!isCollapse'></i>
            </span>
          </div>
          <!-- 下部展示菜单 -->
          <V-Side-Menu></V-Side-Menu>
        </div>
        <!-- 内容区域 -->
        <div class = 'dark_main_show'>
          <transition name = "move" mode = "out-in">
            <router-view v-if = "isActiveRouter && currentThemeWatch === 'theme_dark'"></router-view>
            <!-- 如果需要缓存，可使用keep-alive -->
          </transition>
        </div>
        <!-- 底部 -->
        <div class = 'dark_footer'>2021©武汉飞加网络科技. ALL Rights Reserved.</div>
      </div>
    </div>
  </div>
</template>

<script>
// 头部
import VHeader from '@/components/common/TheHeader.vue'
// 侧边栏
import VSidebar from '@/components/common/TheSideBar.vue'
// 尾部
import VFooter from '@/components/common/TheFooter.vue'
// 头部的时间组件
import VClock from '@/components/common/TheHeader_clock.vue'
// 右侧用户信息
import VHeaderInfo from '@/components/common/TheHeaderInfo.vue'
// 左侧侧边栏
import VSideMenu from '@/components/common/TheSideMenu.vue'
export default {
  data () {
    return {
      isSilder: true,
      // 定义一个变量用于属性当前页面
      isActiveRouter: true
    }
  },
  // 通过provide和inject进行当前页面的刷新的操作
  provide () {
    return {
      reloadCurrentRouter: this.reloadCurrentRouter
    }
  },
  computed: {
    getRouteLoading () {
      return this.$store.state.routerIsLoading
    },
    currentThemeWatch () {
      return this.$store.state.currentTheme
    },
    isCollapse: function () {
      return this.$store.state.isCollapse
    }
  },
  methods: {
    // 刷新当前页面---通过router-view的显示和隐藏来切换
    reloadCurrentRouter () {
      this.isActiveRouter = false
      this.$nextTick(() => {
        this.isActiveRouter = true
      })
    },
    // 改变左边菜单的收起和展开的状态
    changeCollapse () {
      this.$store.dispatch('changSubmenuCollapse', !this.$store.state.isCollapse)
    }
  },
  components: {
    VHeader,
    VSidebar,
    VFooter,
    VClock,
    VHeaderInfo,
    VSideMenu
  }
}
</script>

<style scoped lang = 'scss'>
.content {
  width: 100%;
  height: 100%;
  &>div {
    height: 100%;
  }
}
.move-enter-active,
.move-leave-active {
  transition: opacity 0.5s;
}
.move-enter,
.move-leave {
  opacity: 0;
}
</style>
